<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<script type="text/javascript" src="../js/layui/layui.js" ></script>
		<link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body>
		<main id="app">
			<section class="buyTicket picBg">
				<div class="container">
					<ul class="list whiteBg radius20 pad30">
						<li class="listItem clearfix" v-for="ticket in pageInfo.list">
							<div class="icon iconCR"></div>
							<div class="text">
								<h6 class="name">{{ticket.name}}</h6>
								<div class="price">￥{{ticket.price}}<span>原价￥{{ticket.price*1.2}}</span></div>
							</div>
							<a @click="checkLogin(ticket.id)" class="buy">购买</a>
						</li>
					</ul>
					<div id="test1" style="text-align: center"></div>
				</div>
			</section>
		</main>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/getParameter.js"></script>
		<script>
			let app1=new Vue({
				el:"#app",
				data:{
					tid:"",
					pageInfo:{}
				},
				methods:{
					checkLogin(id){
						let _this=this;
						axios.get("/user/findLogin").then(function (response){
							if(response.data==""){
								location.href="/userclient/login.html";
							}else {
								location.href="/userclient/order.html?tid="+id                                                                                                                       ;
							}
						})
					},
					find(start,pageSize){
						axios.get("/ticket/findByGid",{
							params:{
								start:start,
								pageSize:pageSize,
								navigatePages:2,
								gid:getParameter("id")
							}
						})
						.then(function(response){
							console.log(response);
							app1.pageInfo=response.data;
						});
					},
				},
				created(){
					this.find(1,2);
				}
			})
		</script>
		<script>
			layui.use('laypage', function(){
				var laypage = layui.laypage;

				//执行一个laypage实例
				laypage.render({
					elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
					,count: app1.pageInfo.total //数据总数，从服务端得到
					,limit:2
					,jump(obj){
						app1.find(obj.curr,2);
					}
				});
			});
		</script>
	</body>

</html>